<template>
  <div class="main">
    <div class="headerbox">
      <div class="header">
        <shopheader></shopheader>
      </div>

      <div class="shopmsg">
        <shopmsg :storeData="storeData"></shopmsg>
      </div>

      <div class="tab">
        <shoptab></shoptab>
      </div>
    </div>

    <div class="bottombox">
      <div class="mainbox">
        <div class="left">
          <!-- <magnifier
            :src="shopData.pictureOriginal"
            style="width: 4rem; height: 4rem"
            alt=""
          /> -->
          <pic-zoom
            v-if="
              shopData.pictureOriginal &&
              shopData.pictureOriginal.split('.')[
                shopData.pictureOriginal.split('.').length - 1
              ] == 'jpg'
            "
            :url="shopData.pictureOriginal"
            :scale="3"
          ></pic-zoom>
          <videos
            v-if="
              activeIn == 0 &&
              shopData.pictureOriginal &&
              shopData.pictureOriginal.split('.')[
                shopData.pictureOriginal.split('.').length - 1
              ] == 'mp4'
            "
            style="
              box-sizing: border-box;
              cursor: pointer;
              width: 4rem;
              height: 4rem;
            "
            :url="shopData.pictureOriginal"
          ></videos>
          <div  v-if="
              activeIn == 1 &&
              shopData.pictureOriginal &&
              shopData.pictureOriginal.split('.')[
                shopData.pictureOriginal.split('.').length - 1
              ] == 'mp4'
            ">
          <videos
            v-if="
              activeIn == 1 &&
              shopData.pictureOriginal &&
              shopData.pictureOriginal.split('.')[
                shopData.pictureOriginal.split('.').length - 1
              ] == 'mp4'
            "
            style="
              box-sizing: border-box;
              cursor: pointer;
              width: 4rem;
              height: 4rem;
            "
            :url="shopData.pictureOriginal"
          ></videos>
        </div>
          <div
            class="recommendPage"
            style="display: flex; margin-top: 0.1rem"
            v-if="shopData.pictureSmall"
          >
            <!-- <img
              style="margin-right: 0.08rem; width: 1rem; height: 1rem"
              v-for="(item, index) in shopData.pictureSmall"
              :src="item"
              alt=""
              :key="index"
            /> -->
            <swiper
              :options="swiperOption"
              ref="mySwiper"
              class="swiper-wrapper"
            >
              <swiper-slide
                v-for="(i, index) in shopData.pictureSmall"
                :key="index"
                style="position: relative"
              >
                <i
                  v-if="i.split('.')[i.split('.').length - 1] == 'mp4'"
                  style="
                    position: absolute;
                    top: 0.4rem;
                    color: rgb(238, 107, 107);
                    left: 0.4rem;
                    font-size: 26px;
                  "
                  class="iconfont icon-bofang"
                ></i>
                <img
                  v-if="i.split('.')[i.split('.').length - 1] == 'mp4'"
                  :src="pictureOriginal"
                  alt=""
                  width="1rem"
                  height="1rem"
                  style="
                    box-sizing: border-box;
                    cursor: pointer;
                    width: 1rem;
                    height: 1rem;
                  "
                  :class="{ swiperActive: activeIn == index }"
                  @mouseenter="changeImg(i, index)"
                />

                <img
                  v-else
                  :src="i"
                  alt=""
                  width="1rem"
                  height="1rem"
                  style="
                    box-sizing: border-box;
                    cursor: pointer;
                    width: 1rem;
                    height: 1rem;
                  "
                  :class="{ swiperActive: activeIn == index }"
                  @mouseenter="changeImg(i, index)"
                />
              </swiper-slide>
            </swiper>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </div>
        </div>
        <div class="right">
          <el-tooltip
            effect="light"
            :content="shopData.specification"
            placement="top"
          >
            <div
              style="
                font-family: PingFang SC;
                font-size: 0.24rem;
                font-weight: bold;
                white-space: nowrap;
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
              "
            >
              {{ shopData.specification }}
            </div>
          </el-tooltip>
          <el-tooltip
            effect="light"
            :content="shopData.goodsName"
            placement="top"
          >
            <div
              style="
                font-family: PingFang SC;
                font-size: 0.16rem;
                color: #999999;
                margin-top: 0.1rem;
                width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              "
            >
              {{ shopData.goodsName }}
            </div>
          </el-tooltip>
          <div
            style="
              font-family: PingFang SC;
              font-size: 0.16rem;
              color: #999999;
              margin-top: 0.1rem;
            "
          ></div>
          <div
            style="
              height: 0.32rem;
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-family: PingFang SC;
              font-size: 0.12rem;
              color: #666666;
              border-bottom: 0.01rem solid #e8e8e8;
              padding-bottom: 0.19rem;
            "
          >
            <div style="display: flex; align-items: center; font-size: 0.16rem">
              <img
                src="../../assets/image/detail/fire.png"
                alt=""
                style="margin-right: 0.04rem; font-size: 0.16rem"
              />
              分销量：{{ shopData.salesPoints }}
            </div>
            <div style="display: flex; align-items: center; font-size: 0.16rem">
              {{ shopData.createTime }}更新<img
                src="../../assets/image/detail/biaoji.png"
                alt=""
                style="margin-left: 0.04rem; font-size: 0.16rem"
              />
            </div>
            <div
              v-if="shopData.collection"
              style="
                display: flex;
                align-items: center;
                color: #ec6c15;
                font-size: 0.16rem;
                cursor: pointer;
              "
            >
              <img
                src="../../assets/image/detail/start.png"
                alt=""
                style="margin-right: 0.04rem; font-size: 0.16rem；cursor:pointer;"
              />已收藏
            </div>
            <div
              v-else
              @click="saveProductCollection"
              style="
                display: flex;
                align-items: center;
                color: #ec6c15;
                font-size: 0.16rem;
                cursor: pointer;
              "
            >
              <img
                src="../../assets/image/detail/start.png"
                alt=""
                style="margin-right: 0.04rem; font-size: 0.16rem；cursor:pointer;"
              />收藏商品
            </div>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              font-family: PingFang SC;
              font-size: 0.16rem;
              color: #666666;
              margin-top: 0.27rem;
            "
          >
            供货价:<span
              v-if="shopData.pmsSkuDTOS && token"
              style="
                font-family: D-DIN;
                margin-left: 0.0672rem;
                font-size: 0.27rem;
                font-weight: bold;
                color: #e22a1f;
              "
              >¥ {{ shopData.priceRange }}</span
            >
            <span
              v-else
              style="
                font-family: D-DIN;
                margin-left: 0.0672rem;
                font-size: 0.27rem;
                font-weight: bold;
                color: #e22a1f;
              "
              >登陆看价</span
            >
          </div>
          <div
            style="display: flex; margin-top: 0.2rem; flex-wrap: wrap"
            v-if="shopData.returnGoods"
          >
            <div
              style="
                border: 0.01rem solid #ec6c15;
                border-radius: 0.09rem;
                color: #ec6c15;
                font-family: PingFang SC;
                font-size: 0.16rem;
                margin-right: 0.2rem;
                margin-bottom: 0.2rem;
                padding: 0 0.08rem;
              "
            >
              支持15天退货
            </div>
            <div
              v-if="shopData.exchangeGoods"
              style="
                border: 0.01rem solid #ec6c15;
                border-radius: 0.09rem;
                color: #ec6c15;
                font-family: PingFang SC;
                font-size: 0.16rem;
                margin-right: 0.2rem;
                padding: 0 0.08rem;
                margin-bottom: 0.2rem;
              "
            >
              支持15天换货
            </div>
            <div
              v-if="shopData.imageProtection"
              style="
                border: 0.01rem solid #ec6c15;
                border-radius: 0.09rem;
                color: #ec6c15;
                font-family: PingFang SC;
                font-size: 0.16rem;
                margin-right: 0.2rem;
                padding: 0 0.08rem;
                margin-bottom: 0.2rem;
              "
            >
              原图保障
            </div>
            <div
              style="
                border: 0.01rem solid #ec6c15;
                border-radius: 0.09rem;
                color: #ec6c15;
                font-family: PingFang SC;
                font-size: 0.16rem;
                margin-right: 0.2rem;
                padding: 0 0.08rem;
                margin-bottom: 0.2rem;
              "
            >
              {{
                shopData.replenishmentTime == 0
                  ? "不确定补货时间"
                  : `${shopData.replenishmentTime}天补货时间`
              }}
            </div>
            <div
              v-if="shopData.buyersShow"
              style="
                border: 0.01rem solid #ec6c15;
                border-radius: 0.09rem;
                color: #ec6c15;
                font-family: PingFang SC;
                font-size: 0.16rem;
                margin-right: 0.2rem;
                padding: 0 0.08rem;
                margin-bottom: 0.2rem;
              "
            >
              支持买家秀
            </div>
            <!-- <div
              style="
                border: 0.01rem solid #ec6c15;
                border-radius: 0.09rem;
                color: #ec6c15;
                font-family: PingFang SC;
                font-size: 0.12rem;
                margin-right: 0.2rem;
                padding: 0 0.08rem;
              "
            >
              支持一件拿货代发
            </div> -->
          </div>
          <div
            style="
              font-family: PingFang SC;
              font-size: 0.16rem;
              color: #999999;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              margin-top: 0.14rem;
              border-bottom: 0.01rem solid #e8e8e8;
              padding-bottom: 0.26rem;
            "
          >
            <span style="margin-right: 0.18rem">身高</span>
            <div
              v-for="(item, index) in shopData.pmsSkuDTOS"
              @click="sizeindex = index"
              :key="index"
              :class="{ isacitive: sizeindex == index }"
              style="
                padding: 0.12rem;
                border: 0.01rem solid #a7adb8;
                margin-right: 0.1rem;
                cursor: pointer;
                margin-bottom: 0.1rem;
              "
            >
              {{ item.size }}
            </div>
          </div>
          <div style="height: 100px; overflow-y: auto">
            <div
              style="
                font-family: PingFang SC;
                margin-top: 0.15rem;
                font-size: 0.16rem;
                color: #999999;
                display: flex;
                align-items: center;
              "
              v-for="(item, index) in shopData.pmsSkuStocks"
              :key="index"
            >
              颜色
              <img
                :src="item.picture"
                alt=""
                style="margin-left: 0.19rem; width: 0.2rem; height: 0.2rem"
              /><span
                style="
                  font-size: 0.14rem;
                  color: #000000;
                  margin-left: 0.15rem;
                  width: 1rem;
                "
                >{{ item.color }}</span
              ><span style="width: 1rem;">{{ item.newSpData[sizeindex].price }}元</span>
              <el-input-number
                v-model="item.newSpData[sizeindex].value"
                :min="0"
                :max="item.newSpData[sizeindex].stock * 1"
                label="描述文字"
                @change="numChange"
              ></el-input-number>
            </div>
          </div>
          <div class="qd" v-if="qdNum > 0">
            <div style="display: flex">
              <div class="numLeft">{{ qdNum }}件</div>
              <div class="newPrice">￥{{ qdPrice.toFixed(2) }}</div>
            </div>
            <div class="topBoX" v-if="qdShow">
              <table>
                <tbody>
                  <tr v-for="(item, index) in tableList" :key="index">
                    <td class="oneBox fw">{{ item.size }}</td>
                    <td class="oneBox">{{ item.num }}</td>
                    <td class="sanBox">
                      <div
                        class="listBoxqd"
                        v-for="(item1, index1) in item.arr"
                        :key="index1"
                      >
                        {{ item1.color }}({{ item1.quantity }})
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="newQd" @click="qdShow = !qdShow">
              {{ qdShow ? "关闭清单" : "查看清单" }}
              <i class="el-icon-notebook-2"></i>
            </div>
          </div>
          <div style="display: flex">
            <div class="lixd" @click="immediateOrder">立即下单</div>
            <div class="jrgwc" @click="getCar">加入购物车</div>
            <div class="tpxz" @click="getCode">图片下载</div>
          </div>
        </div>
      </div>
      <div class="leftmsg">
        <shopdetail :storeData="storeData"></shopdetail>
      </div>

      <!-- <div class="right">
        <div class="header">
          <div class="top">
            <div
              class="item"
              :class="activeIndex == index ? 'activeitem' : ''"
              v-for="(item, index) in itemlist"
              :key="index"
            >
              {{ item }}
            </div>
          </div>

          <div class="screen">
            <div
              @click="screenindex = index"
              class="leftbox"
              :class="{ isactive: screenindex == index }"
              v-for="(item, index) in screenlist"
              :key="index"
            >
              {{ item }}
              <div class="sanjiao" v-if="item == '价格'">
                <div class="topsnjiao"></div>
                <div class="bottomsanjiao"></div>
              </div>
            </div>

            <div class="rightbox">
              <div
                style="width: 0.8325rem;
      height: 0.23rem;background: #EBEBEB;font-family: PingFang SC;
      font-size: 0.12rem;color: #A7ADB8; line-height: 0.28rem;
      padding-left: 0.05rem;
      margin-right: 0.02rem;"
              >
                最低价
              </div>
              ~
              <div
                style="width: 0.8325rem;
      height: 0.23rem;background: #EBEBEB;font-family: PingFang SC;
      font-size: 0.12rem;color: #A7ADB8; line-height: 0.28rem;
      padding-left: 0.05rem;
      margin-left: 0.02rem;"
              >
                最高价
              </div>
              <div class="searchbutton">查询</div>
            </div>
          </div>
        </div>

        <div class="bottom">
          <div class="shopproduct" v-for="(item, index) in 24" :key="index">
            <shopproduct></shopproduct>
          </div>
        </div>
      </div> -->
    </div>
    <div class="bottom">
      <div class="leftside" v-if="newShopList.length">
        <div
          style="
            display: flex;
            align-items: center;
            margin-top: 0.2rem;
            margin-left: 0.12rem;
          "
        >
          <img src="../../assets/image/detail/new.png" alt="" /><span
            style="
              font-family: PingFang SC;
              color: #ec6c15;
              font-size: 0.16rem;
              font-weight: bold;
            "
            >最近上新
          </span>
        </div>
        <div
          @click="toPath(item.id)"
          v-for="(item, index) in newShopList"
          :key="index"
          style="
            width: 1.8rem;
            margin-left: 0.08rem;
            margin-top: 0.1rem;
            margin-bottom: 0.16rem;
            margin-right: 0.08rem;
            background: #fafafa;
            border: 0.01rem solid rgba(0, 0, 0, 0);
            cursor: pointer;
          "
        >
          <img style="width: 1.8rem" :src="item.pictureOriginal" alt="" />
          <div
            style="
              font-family: PingFang SC;
              margin-top: -0.2rem;
              font-size: 0.16rem;
              color: #333333;
            "
          >
            {{ item.goodsName }}
          </div>
          <div
            style="
              font-family: PingFang SC;
              margin-top: 0.05rem;
              font-size: 0.16rem;
              color: #999999;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
          >
            {{ item.specification }}
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 0.1rem;
            "
          >
            <div
              style="
                font-family: D-DIN;
                font-size: 0.18rem;
                color: #e22a1f;
                font-weight: bold;
              "
            >
              ¥{{ item.price }}
            </div>
            <div
              style="
                font-family: PingFang SC;
                font-size: 0.16rem;
                color: #666666;
              "
            >
              分销量：{{ item.salesPoints }}
            </div>
          </div>
        </div>
        <div
          @click="
            $router.push({
              path: '/highshop',
              query: {
                id: shopData.storeId,
              },
            })
          "
          style="
            width: 100%;
            font-family: OPPOSans;
            height: 0.37rem;
            border-top: 0.01rem solid #e8e8e8;
            text-align: center;
            line-height: 0.37rem;
            font-size: 0.12rem;
            color: #ec6c15;
            cursor: pointer;
          "
        >
          更多新品>>
        </div>
      </div>
      <div class="middlebox">
        <div style="width: 8.16rem; height: 0.4rem; background: #f5f7f9">
          <div
            style="
              width: 1.29rem;
              background: #ec6c15;
              line-height: 0.4rem;
              text-align: center;
              font-family: PingFang SC;
              font-size: 0.19rem;
              color: #ffffff;
              font-weight: 500;
            "
          >
            商品详情
          </div>
        </div>
        <div
          style="
            width: 6.64rem;
            display: flex;
            /* align-items: center; */
            justify-content: space-between;
            height: 1rem;
            padding: 0.19rem 1.41rem 0.22rem 0.11rem;
            border: 0.01rem solid #e8e8e8;
          "
        >
          <div style="display: flex; flex-wrap: wrap">
            <div
              style="
                font-family: PingFang SC;
                font-size: 0.16rem;
                color: #666666;
              "
              v-for="(item, index) in shopData.pmsProductAttributeValues"
              :key="index"
            >
              <span
                v-if="item.value"
                style="margin-bottom: 0.13rem; margin-right: 0.13rem"
              >
                {{ item.value ? item.productAttributeName : ""
                }}{{ item.value ? "：" : ""
                }}<span
                  style="
                    font-family: PingFang SC;
                    font-size: 0.16rem;
                    color: #000000;
                  "
                  >{{ item.value ? item.value : "" }}</span
                >
              </span>
            </div>
          </div>
        </div>

        <div style="font-size: 0">
          <img
            v-for="(item, index) in shopData.intro"
            :key="index"
            :src="item"
            style="width: 8.16rem"
            alt=""
          />
        </div>
      </div>
      <div
        class="rightbox"
        v-if="form.recommendProduct.length"
        style="margin-left: 0.2rem"
      >
        <div
          style="
            width: 1.62rem;
            height: 0.3rem;
            background: #f5f7f9;
            text-align: center;
            line-height: 0.3rem;
            font-family: PingFang SC;
            font-size: 0.16rem;
            font-weight: 500;
          "
        >
          -- 店长推荐 --
        </div>
        <div
          style="position: relative; cursor: pointer"
          v-for="(item, index) in form.recommendProduct"
          :key="index"
          @click="toPath(item.id)"
        >
          <img style="width: 1.62rem" :src="item.pictureOriginal" alt="" />
          <div
            style="
              width: 1.6rem;
              height: 0.2rem;
              background: rgba(255, 255, 255, 0.6);
              border: 0.01rem solid rgba(0, 0, 0, 0);
              font-family: OPPOSans;
              font-size: 0.16rem;
              position: absolute;
              bottom: 0.26rem;
              right: 0;
              text-align: center;
            "
          >
            ¥{{ item.price }}
          </div>
        </div>
      </div>
    </div>

    <div class="page-bottom">
      <Bottom></Bottom>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">图片包下载</div>
        <div class="chahao" @click="dialogVisible = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 10px">
        <el-form
          ref="formRules"
          :model="imgCodeFrom"
          label-width="auto"
          label-position="right"
          style="width: 100%; margin-top: 0.2rem; margin-left: 0.2rem"
        >
          <el-form-item label="图形验证码:" prop="ImgCode">
            <div
              style="
                width: 100% !important;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <el-input
                style="margin-right: 0.1rem"
                placeholder="图形验证码"
                v-model="imgCodeFrom.ImgCode"
              >
              </el-input>
              <!-- <validate-code ref="ref_validateCode" /> -->
              <img :src="codeImg" @click="getCode" class="codeImg" alt="" />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="downZip"> 确定</el-button>
        <el-button @click="dialogVisible = false"> 取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saveProductCollection, saveStoreCollection } from "@/api/MyCollection";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import PicZoom from "vue-piczoom";
import shopheader from "./components/shopheader.vue";
import shopmsg from "./components/shopmsg.vue";
import shoptab from "./components/shoptab.vue";
import shopdetail from "./components/shopdetail.vue";
import shopproduct from "./components/shopproduct.vue";
import Bottom from "../../components/bottom";
import { getToken, removeToken } from "@/utils/auth";
import { v4 as uuidv4 } from "uuid";
import {
  getData,
  pmsStore,
  getCar,
  saveDownloadHistory,
  immediateOrder,
  selectLastNewProductForStore,
} from "@/api/shopDetail";
import { getAllAd } from "@/api/home/index";
import { selectStoreDecorateByStoreId } from "@/api/shopMange";
import { getCode, checkCode } from "@/api/enroll";
import videos from "@/components/videoB";
export default {
  components: {
    shopheader,
    shopmsg,
    shoptab,
    shopdetail,
    shopproduct,
    Bottom,
    PicZoom,
    swiper,
    swiperSlide,
    videos,
  },

  data() {
    return {
      imgCodeFrom: {},
      dialogVisible: false,
      newShopList: [],
      form: {
        recommendProduct: [],
      },
      qdShow: false,
      tableList: [],
      qdNum: 0,
      qdPrice: 0,
      storeData: {},
      adData: {
        last_new_product: [],
        store_recommend: [],
      },
      activeIn: null,
      swiperOption: {
        loop: false, // 是否循环轮播
        autoplay: false, // 是否可以自动轮播
        slidesPerView: 4, // 可是区域内可展示多少个块
        spaceBetween: 0, // 块之间间隔距离
        initialSlide: 0, // 默认初始显示块
        freeMode: false,
        // 显示分页
        // pagination: {
        //     el: '.swiper-pagination',
        //     clickable: true
        //   },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      ggList: [],
      shopData: {},
      itemlist: [
        "全部(87)",
        "T恤(23)",
        "普通外套(16)",
        "套装(15)",
        "睡衣（48）",
      ],
      activeIndex: 0,
      screenlist: ["综合", "人气", "最新", "价格"],
      screenindex: 0,
      sizelist: ["90", "90", "90", "90", "90", "90", "定制加大码"],
      sizeindex: 0,
      token: null,
      codeImg: "",
      uuid: "",
      pictureOriginal: "",
    };
  },
  created() {
    this.getData(this.$route.query.id);
    this.getAllAd();
    this.token = getToken();
  },
  methods: {
    // 获取图形验证码
    getCode() {
      if (this.token) {
        let userData = JSON.parse(sessionStorage.getItem("UserData"));
        console.log(userData);
        if (userData.isStore) {
          this.$message({
            message: "您不是采购商不可以下载图片包",
            type: "warning",
          });
          return false;
        }
        if (!this.shopData.picturePack) {
          this.$message({
            message: "该商品没有图片包",
            type: "warning",
          });
          return false;
        }
        this.uuid = (uuidv4() + "").replace(/-/g, "").substring(0, 5);
        console.log(this.uuid);
        getCode(this.uuid).then((data) => {
          this.codeImg = `data:image/jpg;base64,${data.data}`;
          this.dialogVisible = true;
        });
      } else {
        this.$message({
          message: "请先登陆！",
          type: "warning",
        });
        this.$router.push("/login");
      }
    },
    // 获取最近上新
    selectLastNewProductForStore(id) {
      selectLastNewProductForStore({
        storeId: id,
      }).then((data) => {
        this.newShopList = data.data;
      });
    },
    // 获取店铺装修信息
    selectStoreDecorateByStoreId(id) {
      selectStoreDecorateByStoreId({
        storeId: id,
      }).then((data) => {
        this.form = data.data;
      });
    },
    // 立即下单
    immediateOrder() {
      if (this.token) {
        const productSkuData = [];
        this.tableList.forEach((item) => {
          item.arr.forEach((item1) => {
            productSkuData.push(item1);
          });
        });
        if (productSkuData.length == 0) {
          this.$message({
            message: "请输入购买商品数量",
            type: "warning",
          });
          return false;
        }
        const params = {
          productId: this.shopData.id,
          productSkuData: JSON.stringify(productSkuData),
        };
        immediateOrder(params).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$router.push({
              path: "/OrderProcess",
              query: {
                id: data.data.orderList.id,
              },
            });
          }
        });
      } else {
        this.$message({
          message: "请先登陆！",
          type: "warning",
        });
        this.$router.push("/login");
      }
    },
    // 收藏商品
    saveProductCollection() {
      saveProductCollection({
        idList: `${this.$route.query.id}`,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "收藏成功",
            type: "success",
          });
          this.getData(this.$route.query.id);
        }
      });
    },
    // 加入购物车
    getCar() {
      if (this.token) {
        const productSkuData = [];
        this.tableList.forEach((item) => {
          item.arr.forEach((item1) => {
            productSkuData.push(item1);
          });
        });
        if (productSkuData.length == 0) {
          this.$message({
            message: "请输入购买商品数量",
            type: "warning",
          });
          return false;
        }
        const params = {
          productId: this.shopData.id,
          productSkuData: JSON.stringify(productSkuData),
        };
        getCar(params).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "加入成功",
              type: "success",
            });
          }
        });
      } else {
        this.$message({
          message: "请先登陆！",
          type: "warning",
        });
        this.$router.push("/login");
      }
    },
    numChange() {
      console.log(this.shopData.pmsSkuStocks);
      let num = 0;
      let price = 0;
      const arr = [];
      this.shopData.pmsSkuStocks.forEach((item) => {
        item.newSpData.forEach((item1) => {
          if (item1.value && item1.value > 0) {
            const obj = {
              size: item1.Size,
              quantity: item1.value,
              color: item.color,
              price: item1.price * 1,
            };
            arr.push(obj);
            num = num + item1.value;
            price = price + item1.price * 1 * item1.value;
          }
        });
      });
      let sgArr = [];
      sgArr = JSON.parse(JSON.stringify(this.shopData.pmsSkuDTOS));
      const newArr = [];
      sgArr.forEach((item) => {
        const obj = {
          size: item.size,
          num: 0,
          arr: [],
        };
        newArr.push(obj);
      });
      newArr.forEach((item) => {
        arr.forEach((item1) => {
          if (item1.size == item.size) {
            item.arr.push(item1);
          }
        });
      });
      this.tableList = [];
      newArr.forEach((item) => {
        if (item.arr.length) {
          let num = 0;
          item.arr.forEach((item1) => {
            num = num + item1.quantity;
          });
          item.num = num;
          this.tableList.push(item);
        }
      });
      this.qdPrice = price;
      this.qdNum = num;
      console.log(this.tableList);
    },
    toPath(id) {
      const currentUrl = window.location.origin;
      window.open(`${currentUrl}/#/detail?id=${id}`);
    },
    // 获取广告
    getAllAd() {
      getAllAd({
        adType: 2,
      }).then((data) => {
        this.adData = data.data;
      });
    },
    changeImg(item, index) {
      this.activeIn = index;
      this.shopData.pictureOriginal = item;
      this.$forceUpdate();
    },

    // 下载图片包
    downZip() {
      checkCode(
        {
          imageCode: this.imgCodeFrom.ImgCode,
        },
        this.uuid
      ).then((data) => {
        if (data.code == 200) {
          saveDownloadHistory({
            productId: this.$route.query.id,
          }).then((data) => {
            window.open(this.shopData.picturePack);
            this.dialogVisible = false;
          });
        }
      });
    },
    // 获取供应商信息
    pmsStore(id) {
      pmsStore(id).then((data) => {
        this.storeData = data.data;
      });
    },
    // 获取商品详情
    getData(id) {
      getData(id).then((data) => {
        this.pmsStore(data.data.storeId);
        this.selectStoreDecorateByStoreId(data.data.storeId);
        this.selectLastNewProductForStore(data.data.storeId);
        this.pictureOriginal = JSON.parse(
          JSON.stringify(data.data.pictureOriginal)
        );
        data.data.pmsSkuStocks.forEach((item) => {
          item.newSpData = [];
        });
        data.data.pmsSkuStocks.forEach((item) => {
          item.spData = JSON.parse(item.spData);
          item.spData.forEach((item1) => {
            const obj = JSON.parse(JSON.stringify(item1));
            item.newSpData.push(JSON.parse(obj));
          });
        });
        data.data.pictureSmall = data.data.pictureSmall.split(",");
        // data.data.pictureSmall.unshift(data.data.pictureOriginal);

        if (data.data.explainVideo) {
          data.data.pictureSmall.unshift(data.data.explainVideo);
        }
        data.data.intro = data.data.intro.split(",");
        let arr = [];
        arr = JSON.parse(JSON.stringify(data.data.pmsSkuDTOS));
        const num = data.data.pmsSkuDTOS.length / data.data.pmsSkuStocks.length;
        data.data.pmsSkuDTOS = arr.slice(0, num);
        if (data.data.descriptionVideo) {
          data.data.pictureSmall.unshift(data.data.descriptionVideo);
        }
        this.shopData = data.data;
        console.log(this.shopData, "商品数据");
      });
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.imgCodeFrom.ImgCode = "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "iconfont"; /* Project id 3269139 */
  src: url("//at.alicdn.com/t/c/font_3269139_c18kv5cw6nn.woff2?t=1699347296728")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_3269139_c18kv5cw6nn.woff?t=1699347296728")
      format("woff"),
    url("//at.alicdn.com/t/c/font_3269139_c18kv5cw6nn.ttf?t=1699347296728")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bofang:before {
  content: "\e602";
}
.codeImg {
  width: 100px;
  height: 0.4rem;
  cursor: pointer;
}

.qd {
  display: flex;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  background: #fafafa;
  height: 0.55rem;
  margin-top: 0.1rem;
  align-items: center;
  color: rgb(226, 42, 31);
  justify-content: space-between;
  position: relative;
  .topBoX {
    position: absolute;
    bottom: 0.56rem;
    width: 100%;
    background: #fff;
    border-right: 1px solid #d9d9d9;
    z-index: 1;
    font-size: 0.14rem;
    border-bottom: none;
    table {
      width: 100%;
      border-spacing: 0;
    }
    .oneBox {
      width: 15%;
      border-left: 1px solid #d9d9d9;
      border-top: 1px solid #d9d9d9;
      height: 0.45rem;
      text-align: center;
      color: rgb(153, 153, 153);
    }
    .fw {
      font-weight: 700;
      color: #666;
    }
    .sanBox {
      width: 100%;
      color: rgb(153, 153, 153);
      border-left: 1px solid #d9d9d9;
      border-top: 1px solid #d9d9d9;
      height: 0.45rem;
      line-height: 0.45rem;
      text-align: center;
      display: flex;
      justify-content: center;
      .listBoxqd {
        margin-right: 0.1rem;
      }
    }
  }
  .numLeft {
    border-right: 1px solid #d8d8d8;
    font-size: 0.16rem;
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.2rem;
    color: rgb(226, 42, 31);
  }
  .newPrice {
    font-size: 0.16rem;
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.2rem;
  }
  .newQd {
    padding: 0 0.2rem;
    border-left: 1px solid #d8d8d8;
    font-size: 0.16rem;
    height: 0.55rem;
    line-height: 0.55rem;
    cursor: pointer;
  }
  .el-icon-notebook-2 {
  }
}
.lixd {
  cursor: pointer;
  width: 1.12rem;
  margin-right: 0.2rem;
  margin-top: 0.25rem;
  height: 0.4rem;
  font-family: PingFang SC;
  font-size: 0.16rem;
  background: #ec6c15;
  font-weight: 500;
  border-radius: 0.2rem;
  line-height: 0.4rem;
  text-align: center;
  color: #ffffff;
}
.jrgwc {
  cursor: pointer;
  width: 1.12rem;
  margin-right: 0.2rem;
  margin-top: 0.25rem;
  height: 0.4rem;
  font-family: PingFang SC;
  font-size: 0.16rem;
  background: #ec6c15;
  font-weight: 500;
  border-radius: 0.2rem;
  line-height: 0.4rem;
  text-align: center;
  color: #ffffff;
}
.tpxz {
  cursor: pointer;
  width: 1.12rem;
  margin-right: 0.2rem;
  margin-top: 0.25rem;
  height: 0.4rem;
  font-family: PingFang SC;
  font-size: 0.16rem;
  border: 0.01rem solid #ec6c15;
  color: #ec6c15;
  font-weight: 500;
  border-radius: 0.2rem;
  line-height: 0.4rem;
  text-align: center;
}
/deep/ .el-input-number {
  width: 1.82rem;
  line-height: 0.33rem;
  margin-left: 0.2rem;
}
.recommendPage {
  position: relative;
  margin-top: 20px;

  .swiper-wrapper {
    width: 229px;
  }

  .swiper-slide {
    min-height: 47px;
  }

  .swiper-button-next {
    right: 0;
  }

  .swiper-button-prev {
    left: 0;
  }

  .swiperActive {
    border: 2px solid #007aff;
  }
}

.main {
  width: 100%;
  height: auto;
  background-color: white;

  .headerbox {
    width: 100%;
    height: 1.74rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .header {
      width: 100%;
      height: 0.52rem;
      background-color: #ffffff;
    }

    .shopmsg {
      width: 100%;
      height: 1.1rem;
    }

    .tab {
      width: 100%;
      height: 0.32rem;
      background: #ec6c15;
    }
  }

  .bottombox {
    margin: 0.4rem auto;
    width: 13rem;
    height: auto;
    display: flex;
    justify-content: space-between;
    background-color: white;
    align-items: flex-start;

    .mainbox {
      display: flex;

      .left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 4rem;
        height: 5rem;
      }

      .right {
        margin-left: 0.23rem;
        width: 5.39rem;

        .isacitive {
          border: 0.01rem solid #ec6c15 !important;
          color: #ec6c15;
        }
      }
    }

    .leftmsg {
      width: 2.58rem;
      height: 4.08rem;
    }

    // .right {
    //   width: 9.31rem;
    //   min-height: 5rem;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: flex-start;
    //   align-items: center;
    //   .header {
    //     width: 100%;
    //     height: auto;
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: flex-start;
    //     align-items: center;
    //     border: 0.01rem solid #e8e8e8;
    //     .top {
    //       width: 100%;
    //       height: 0.6rem;
    //       border-bottom: 1px solid #ec6c15;
    //       display: flex;
    //       justify-content: flex-start;
    //       align-items: center;
    //       .item {
    //         width: auto;
    //         height: 0.3rem;
    //         line-height: 0.3rem;
    //         text-align: center;
    //         padding: 0 0.2rem;
    //         border-right: 1px solid #e8e8e8;
    //         font-size: 0.14rem;
    //         color: #666666;
    //       }
    //       .activeitem {
    //         color: #ec6c15;
    //       }
    //     }
    //     .screen {
    //       font-family: PingFang SC;
    //       font-size: 0.12rem;
    //       color: #666666;
    //       display: flex;
    //       align-items: center;
    //       width: 100%;
    //       height: 0.42rem;
    //       border: 0.01rem solid #e8e8e8;
    //       border-top: none;
    //       .rightbox {
    //         margin-left: 0.2rem;
    //         display: flex;
    //         align-items: center;
    //         .searchbutton {
    //           width: 0.61rem;
    //           height: 0.28rem;
    //           background: #ec6c15;
    //           margin-left: 0.0711rem;
    //           font-family: PingFang SC;
    //           font-size: 0.12rem;
    //           color: #ffffff;
    //           text-align: center;
    //           line-height: 0.28rem;
    //           cursor: pointer;
    //         }
    //       }
    //       .leftbox {
    //         cursor: pointer;
    //         position: relative;
    //         height: 0.32rem;
    //         width: 1rem;
    //         text-align: center;
    //         line-height: 0.32rem;
    //         // background-color: yellow;
    //         border-right: 0.01rem solid #e8e8e8;
    //         .sanjiao {
    //           position: absolute;
    //           top: 0.01rem;
    //           right: 0.1rem;
    //           display: flex;
    //           flex-direction: column;
    //           align-items: center;
    //           .topsnjiao {
    //             cursor: pointer;
    //             width: 0;
    //             height: 0;
    //             border: 0.08rem solid;
    //             border-color: transparent transparent #d8d8d8;
    //           }
    //           .bottomsanjiao {
    //             cursor: pointer;
    //             width: 0;
    //             height: 0;
    //             border: 0.08rem solid;
    //             margin-top: 0.0167rem;
    //             border-color: #d8d8d8 transparent transparent transparent;
    //           }
    //         }
    //       }
    //       .isactive {
    //         color: #ec6c15;
    //         font-weight: 600;
    //       }
    //       .leftbox:last-child {
    //         border-right: none;
    //       }
    //     }
    //   }
    //   .bottom {
    //     padding-bottom: 0.14rem;
    //     width: 100%;
    //     height: auto;
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     flex-wrap: wrap;
    //     .shopproduct {
    //       margin-top: 0.2rem;
    //       width: 2.18rem;
    //       height: 3.1rem;
    //       background: #ffffff;
    //     }
    //   }
    // }
  }

  .bottom {
    width: 11.76rem;
    margin: 0 auto;
    margin-top: 0.5rem;
    padding: 0 0.12rem;
    // width: 100%;
    display: flex;
    justify-content: space-between;

    .leftside {
      width: 2rem;
      // height: 16.83rem;
      border: 0.01rem solid #e8e8e8;
      margin-right: 0.2rem;
      // background-color: black;
    }

    .middlebox {
      width: 8.16rem;
    }
  }

  .page-bottom {
    width: 100%;
    height: 3.2rem;
    background: #ffffff;
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .form {
      .btnBoxB {
        border: 0.01rem solid #e22a1f;
        font-size: 0.16rem;
        color: #e22a1f;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-left: 0.1rem;
        cursor: pointer;
      }
      /deep/.el-input__suffix {
        right: 5px;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
      }
      /deep/ .el-cascader {
        width: 100%;
      }
      .bitS {
        display: flex;
      }
      .leftBtn {
        width: 1rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #e22a1f;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        text-align: center;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .rightBtn {
        background: #fff;
        color: #e22a1f;
        border: 0.01rem solid #e22a1f;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
  .el-form-item {
    width: auto;
    // background: #fff;
  }
}
</style>
<style scoped lang="scss">
/deep/ .recommendPage {
  position: relative;
  margin-top: 20px;

  .swiper-wrapper {
    width: 4rem !important;
  }

  .swiper-slide {
    height: 1rem;
  }

  .swiper-button-next {
    right: 0;
    cursor: pointer;
  }

  .swiper-button-prev {
    left: 0;
    cursor: pointer;
  }

  .swiperActive {
    border: 2px solid #ec6c15;
  }
}
/deep/ .el-input-number__decrease {
  width: 0.4rem;
}
/deep/ .el-input-number .el-input__inner {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
</style>
<style scoped lang="scss">
// @media screen and (max-width: 1300px) {
//   .el-input-number {
//     width: 1.52rem;
//     line-height: 0.5rem;
//     margin-left: 0.2rem;
//   }
//   /deep/ .el-input-number__decrease {
//     width: 0.4rem;
//   }
//   /deep/ .el-input-number__increase {
//     width: 0.4rem;
//   }
//   /deep/ .el-input__inner {
//     padding: 0;
//   }
//   .recommendPage {
//     position: relative;
//     margin-top: 20px;

//     .swiper-wrapper {
//       width: 229px;
//     }

//     .swiper-slide {
//       min-height: 47px;
//     }

//     .swiper-button-next {
//       right: 0;
//     }

//     .swiper-button-prev {
//       left: 0;
//     }

//     .swiperActive {
//       border: 2px solid #007aff;
//     }
//   }

//   .main {
//     width: 100%;
//     height: auto;
//     background-color: white;

//     .headerbox {
//       width: 100%;
//       height: 1.74rem;
//       display: flex;
//       flex-direction: column;
//       justify-content: flex-start;
//       align-items: center;

//       .header {
//         width: 100%;
//         height: 0.52rem;
//         background-color: #ffffff;
//       }

//       .shopmsg {
//         width: 100%;
//         height: 1.1rem;
//       }

//       .tab {
//         width: 100%;
//         height: 0.32rem;
//         background: #ec6c15;
//       }
//     }

//     .bottombox {
//       margin: 0.4rem auto;
//       width: 13rem;
//       height: auto;
//       display: flex;
//       justify-content: space-between;
//       background-color: white;
//       align-items: flex-start;

//       .mainbox {
//         display: flex;

//         .left {
//           display: flex;
//           flex-direction: column;
//           align-items: flex-start;
//           width: 4rem;
//           height: 4.68rem;
//         }

//         .right {
//           margin-left: 0.23rem;
//           width: 5.39rem;

//           .isacitive {
//             border: 0.01rem solid #ec6c15 !important;
//             color: #ec6c15;
//           }
//         }
//       }

//       .leftmsg {
//         width: 3.18rem;
//         height: 4.08rem;
//       }
//     }

//     .bottom {
//       width: 11.76rem;
//       margin: 0 auto;
//       margin-top: 0.5rem;
//       padding: 0 0.12rem;
//       // width: 100%;
//       display: flex;
//       justify-content: space-between;

//       .leftside {
//         width: 2rem;
//         // height: 16.83rem;
//         border: 0.01rem solid #e8e8e8;
//         margin-right: 0.2rem;
//         // background-color: black;
//       }

//       .middlebox {
//         width: 8.16rem;
//       }
//     }

//     .page-bottom {
//       width: 100%;
//       height: 3.2rem;
//       background: #ffffff;
//     }
//   }
// }
</style>
